import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false


// 指令的英语叫directive 
// Vue.directive('指令的名字',{选项对象})
Vue.directive('focus',{
  //指令在哪个标签上使用,el就是谁 binding是相关的配置 后面再使用 暂时先不管
  inserted(el){
    el.focus()
  }
})

// v-model="msg" msg是变量
// v-color="'red'"
// 带有值的自定义指令
Vue.directive('color',{
  // 指令的钩子函数 钩子函数会自动执行
  inserted(el,binding){
    console.log(123);
    el.style.color = binding.value 
  }
})

// 自定义指令有钩子函数,钩子函数有很多个,因为不同的钩子在不同时间点执行的
// 常见有三个 bind(了解,可以还是用inserted) inserted(元素插入到页面上的时候执行) update(值改变的时候就会执行)


// 现在有一个Input输入框 我们需求:校验输入的内容的长度 如果是大于10,我们就是绿色的,否则就不合法 红色的
Vue.directive('validate',{
  //初始化的时候只会执行一次 元素插入到页面上的时候就执行
  inserted(el,binding){
    if(binding.value.length >= 5){
      el.style.color = 'green'
    }else{
      el.style.color = 'red'
    }
  },
  //执行多次,只要数据变了就会执行
  update(el,binding){
    if(binding.value.length >= 5){
      el.style.color = 'green'
    }else{
      el.style.color = 'red'
    }
  }
})


Vue.directive('loading',{
  inserted(el,binding){
   if(binding.value === true){
    const div = document.createElement('div')
    div.classList.add('lds-dual-ring') 
    el.append(div)
   }
  },
  update(el,binding){
    if(binding.value === false){
      //el.querySelector查找范围更小一点 性能更好
      const div = el.querySelector('.lds-dual-ring')
      div.remove()
    }
  }
})


// 图片懒加载 
// 需求:自己实现一个v-lazy
// 使用方式
// <img v-lazy="真实的图片地址" src="默认的占位符图片"> 
// 效果:如果图片到了可视区,才会把v-lazy的值赋值给src 
// 如何判断当前图片是否到可视区

new Vue({
  render: h => h(App),
}).$mount('#app')
